import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image,
  Animated,
  TextInput,
  TouchableOpacity
} from 'react-native';
import styles from '../account/settingIndexStyle';
import api from '../../services/api';
import ToastTip from '../global/ToastTip';
import LoadingTip from '../global/LoadingTip';
import CountDownText from '../global/countDown/CountDownText';

class ForgetPassword extends Component {
    constructor(props) {
		super(props);

		this.state = {
            scrollY: 0,
            curpasswd:'',
            newphone:'',
            code:'',
            loadingShow: false,
            interval: false,
            isShowPass: false,
		};

		// this._getTabHeight = this._getTabHeight.bind(this);
		// this._onChangeTab = this._onChangeTab.bind(this);

		// this.props.navigator.setOnNavigatorEvent(this._onNavigatorEvent.bind(this));
	}

    componentWillMount() {
		// this._retrieveDetails();
	}

    async _sendCode(){
        // let { session } = this.props;

        if(this.state.interval){
            return;
        }

        let {curpasswd, newphone, code} = this.state;

        if(!newphone){
             this.refs.toast.show('请输入手机号');
             return;
        }

        if(!/^1[0-9]{10}$/.test(newphone)){
            this.refs.toast.show('请输入正确的手机号');
            return;
        }

        this.setState({loadingShow: true, interval: true});
        let res = await api.post("/housekeeper/regSendCode",{phone:newphone,type:"FORGET_PASSWD"});
        this.setState({loadingShow: false});

        if(res.cd == 1){
            this.setState({interval:false});
            this.refs.toast.show(res.msg);
            return;
        }

        if(!res.data || res.data.status_code != "OK"){
            this.setState({interval:false});
            if(res.data.status_code == 'isv.BUSINESS_LIMIT_CONTROL'){
                this.refs.toast.show("发送频繁，请稍后重试");
            }else if(res.data.status_code == 'isv.MOBILE_NUMBER_ILLEGAL'){
                this.refs.toast.show("手机号码格式错误");
            }else{
                this.refs.toast.show("发送验证码失败");
            }
			return;
		}

        this.refs.countDownText.start();
        this.refs.toast.show("验证码已发送到您的手机\n10分钟内输入有效", 2000);

        // this.setState({code: res.msg});

        console.log("##", res);
    }

    async _submitAction(){
        let {curpasswd, newphone, code} = this.state;

        if(!newphone){
             this.refs.toast.show('请输入手机号');
             return;
        }

        if(!/^1[0-9]{10}$/.test(newphone)){
            this.refs.toast.show('请输入正确的手机号');
            return;
        }

        if(!code){
             this.refs.toast.show('请输入验证码');
             return;
        }

        if(!curpasswd){
             this.refs.toast.show('请输入新密码');
             return;
        }

        this.setState({loadingShow: true});
        let res = await api.post("/housekeeper/forgetPasswd",{
            phone:newphone,
            passwd:curpasswd,
            code:code});

        //loading消失
        this.setState({loadingShow: false});

        if(res.cd == 1){
            this.refs.toast.show(res.msg);
        }else{
            this.refs.toast.show(res.msg, 2000, ()=>{
                this.props.navigator.pop();
            });
        }
    }

    _showPass(){
        let {isShowPass} = this.state;

        this.setState({
            isShowPass: !isShowPass
        });
    }

    render() {

        return (
            <View style={styles.container}>
                <ScrollView
                    style={styles.scrollContainer}
                    scrollEventThrottle={16}>

                    <View style={styles.toolsContainer}>
                        <View style={styles.addBtn}>
                            <Text style={styles.titleText}>手机号</Text>
                            <TextInput
                                style={styles.centerInput}
                                editable = {true}
                                clearButtonMode={'while-editing'}
                                maxLength={11}
                                keyboardType={'numeric'}
                                underlineColorAndroid={'transparent'}
                                onChangeText={(text)=>{this.setState({newphone:text})}}
                                placeholder={'请输入手机号'}
                                placeholderTextColor={'#B5B5B5'}
                            />
                        </View>
                        <View style={styles.addBtn}>
                            <Text style={styles.titleText}>验证码</Text>
                            <TextInput
                                style={styles.centerInput}
                                editable = {true}
                                clearButtonMode={'while-editing'}
                                value={this.state.code}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入验证码'}
                                onChangeText={(text)=>{this.setState({code:text})}}
                                placeholderTextColor={'#B5B5B5'}
                            />
                            <TouchableOpacity onPress={this._sendCode.bind(this)} style={styles.sendCodeBtn}>
                                <CountDownText
                                    style={styles.sendCodeText}
                                    disabledStyle={styles.disableSendCodeText}
                                    countType='seconds'
                                    ref='countDownText'
                                    afterEnd={() => {this.setState({interval:false})}}
                                    timeLeft={59}
                                    step={-1}
                                    startText='获取验证码'
                                    endText='获取验证码'
                                    auto={false}
                                    intervalText={(sec) => sec + '秒后重新获取'}
                                />
                            </TouchableOpacity>
                        </View>
                        <View style={[styles.addBtn,{borderBottomWidth:0}]}>
                            <Text style={styles.titleText}>新密码</Text>
                            <TextInput
                                style={styles.centerInput}
                                editable = {true}
                                clearButtonMode={'while-editing'}
                                secureTextEntry={true}
                                secureTextEntry={!this.state.isShowPass}
                                onChangeText={(text)=>{this.setState({curpasswd:text})}}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入新密码'}
                                placeholderTextColor={'#B5B5B5'}
                            />
                            <TouchableOpacity onPress={this._showPass.bind(this)} style={{padding:15}}>
                                <Image source={this.state.isShowPass?require('../../../img/hk_login_openeye_icon.png'):require('../../../img/hk_login_closeeye_icon.png')} style={styles.rightImage}/>
                            </TouchableOpacity>
                        </View>

                    </View>
                    <TouchableOpacity onPress={this._submitAction.bind(this)} style={styles.submitActionPhoneBtn}>
                        <Text style={styles.submitActionText}>确定</Text>
                    </TouchableOpacity>
                </ScrollView>
                <ToastTip ref="toast"/>
                <LoadingTip show={this.state.loadingShow}/>
            </View>
        );
    }
}

var connectHelper = require('../../services/connectHelper');
ForgetPassword = connectHelper(state => state)(ForgetPassword);

module.exports = ForgetPassword;
